<div class="pf-c-background-image">
  <svg xmlns="http://www.w3.org/2000/svg" class="pf-c-background-image__filter" width="0" height="0">
    <filter id="image_overlay">
      <feColorMatrix type="matrix" values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0" />
      <feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
        <feFuncR type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncR>
        <feFuncG type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncG>
        <feFuncB type="table" tableValues="0.086274509803922 0.43921568627451"></feFuncB>
        <feFuncA type="table" tableValues="0 1"></feFuncA>
      </feComponentTransfer>
    </filter>
  </svg>
</div>
<div class="pf-c-login">
  <div class="pf-c-login__container">
    <header class="pf-c-login__header">
      <img class="pf-c-brand" ng-src="{{$ctrl.branding.appLogoUrl}}" alt="{{$ctrl.branding.appName}}">
      <span>{{$ctrl.branding.appType}}</span>
    </header>
    <main class="pf-c-login__main">
      <header class="pf-c-login__main-header">
        <h1 class="pf-c-title pf-m-3xl">
          Log in to your account
        </h1>
      </header>
      <div class="pf-c-login__main-body">
        <form novalidate class="pf-c-form" ng-submit="$ctrl.doLogin()">
          <p class="pf-c-form__helper-text pf-m-error" ng-class="{'pf-m-hidden': !$ctrl.wrongPassword}">
            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
            &nbsp;Invalid login credentials
          </p>
          <div class="pf-c-form__group">
            <label class="pf-c-form__label" for="username">
              Username
            </label>
            <input id="username" name="username" type="text" class="pf-c-form-control"
              ng-model="$ctrl.entity.username" aria-invalid="{{$ctrl.wrongPassword}}" autocomplete="username"
              required autofocus></input>
          </div>
          <div class="pf-c-form__group">
            <label class="pf-c-form__label" for="password">
              Password
            </label>
            <input id="password" name="password" type="password" class="pf-c-form-control"
              ng-model="$ctrl.entity.password" aria-invalid="{{$ctrl.wrongPassword}}" autocomplete="current-password"
              required></input>
          </div>
          <div class="pf-c-form__group">
            <div class="pf-c-check">
              <input id="login-rememberme" name="login-rememberme" type="checkbox" class="pf-c-check__input"
                ng-model="$ctrl.rememberMe" />
              <label class="pf-c-check__label" for="login-rememberme">
                Remember me
              </label>
            </div>
          </div>
          <div class="pf-c-form__group pf-m-action">
            <button type="submit" class="pf-c-button pf-m-primary pf-m-block">
              Log in
            </button>
          </div>
        </form>
      </div>
    </main>
    <footer class="pf-c-login__footer">
      <p>{{$ctrl.login.description}}</p>
      <ul class="pf-c-list pf-m-inline">
        <li ng-repeat="link in $ctrl.login.links">
          <a href="{{link.url}}">
            {{link.text}}
          </a>
        </li>
      </ul>
    </footer>
  </div>
</div>
